<template>
  <view class="content">
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单号 </view>
      <view class="text-color-primary"> {{ order.orderNumber }} </view>
    </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单状态 </view>
      <view class="text-color-primary"> {{ order.orderStatus }} </view>
    </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单类型 </view>
      <view class="text-color1"> {{order.orderType}} </view>
    </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 时间 </view>
      <view class="text-color1"> {{ order.placeOrderTime }} </view>
    </view>
    <view class="divider"> </view>
    <view class="product-item" v-for="(item, index) in order.orderDetails" :key="index">
      <image class="product-item-icon" src="@/subpages/static/shop_removed.png"></image>
      <view class="flex-1">
        <view class="flexr text-color1 justify-spacebwt">
          <view> {{ item.commodityName }} </view>
          <view> ¥ {{ item.orderAmount }} </view>
        </view>
        <view class="flexr text-color1 fontsize24">
          <view>
            <text class="text-color2">单价:</text>
            <text> ¥ {{ item.orderPrice }}</text>
          </view>
          <view>
            <text class="text-color2" style="margin-left: 10rpx;">折扣:</text>
            <text> ¥ {{ item.discount }}</text>
          </view>
          <view>
            <text class="text-color2" style="margin-left: 10rpx;">数量:</text>
            <text>{{ item.orderQty }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="divider"> </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单定金 </view>
      <view class="text-color-primary"> ¥ {{ order.deposit }} </view>
    </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单尾款 </view>
      <view class="text-color-primary"> ¥ {{ order.remainder }} </view>
    </view>
    <view class="order-info-row flexr align-center">
      <view class="text-color2"> 订单总金额 </view>
      <view class="text-color-primary total-price"> ¥ {{ order.billAmount }} </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore()
const orderNumber = ref('')
onLoad((options) => {
	console.log(options)
	orderNumber.value = options.orderNumber
})
const order = computed(() => {
	return userStore.allOrders.find(item => item.orderNumber === orderNumber.value) || {}
});

</script>

<style lang="scss">
.content {
  padding-top: 32rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  overflow-y: scroll;
  background-color: white;
  .order-info-row {
    height: 88rpx;
    min-height: 88rpx;
    justify-content: space-between;
    align-self: stretch;
  }
  .divider {
    margin: 30rpx 0;
  }
  .total-price {
    font-size: 36rpx;
  }
  .product-item {
    height: 160rpx;
    min-height: 160rpx;
    align-items: center;
    display: flex;
    .product-item-icon {
      width: 112rpx;
      height: 112rpx;
      border-radius: 12rpx;
      margin-right: 16rpx;
    }
    .fontsize24 {
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
